<template>
  <render v-bind="props"></render>
</template>
<script setup lang="ts">
import { h, computed } from 'vue'
import TextNode from '../nodes/TextNode.vue'
import { PARA_TYPE, ParagraphItem } from '../util'
const props = withDefaults(defineProps<{ data: ParagraphItem }>(), {})
const style = computed(() => {
  let align = props.data.align
  let style: Record<string, string> = {}
  align && (style.textAlign = 2 === align ? 'right' : 'center')
  return style
})
const render = (props: { data: ParagraphItem }) => {
  const { data } = props
  return h(TextNode, {
    style: style.value,
    tag: (() => {
      switch (data.para_type) {
        case PARA_TYPE.HEADER1:
          return 'h1'
        case PARA_TYPE.HEADER2:
          return 'h2'
        default:
          return 'p'
      }
    })(),
    nodes: data.text!.nodes,
  })
}
</script>
<style lang="scss" scoped>
</style>
